<template>
    <view class="parallel_container">
        <cu-custom bgColor="bg-blue" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">
                <text class="nav-title nav-title-selected"></text>
            </block>
        </cu-custom>
        <addressSearchFixed style="position: initial;" :placeholderName="objSelect.name" ref="setAddres"
            @searchBtn='event_clickSearchBtn' :isShowAddress="false"></addressSearchFixed>
        <view class='newEnergy-backgourd' :style="[{ height: 'calc(100% - ' + (SeachBar + CustomBar) + 'px)',top: SeachBar + CustomBar + 'px' }]">
            <view class='newEnergy-flex'>
                <view class="collapse" v-for="(item, index) in itemList" :key="index">
                    <view>
                        <view class="coll-header">
                            <view ref="ani" class="sub-num" @click="changeContent(item, index)">
                                <text v-if='index == 0' :style='{
                                    color: item.open ? "#2D56C5" : ""
                                }'>
                                    {{ AllVehicUname ? AllVehicUname : item.subnum }}
                                </text>
                                <text v-if='index == 1' :style='{
                                    color: item.open ? "#2D56C5" : ""
                                }'>
                                    <!-- 	<text>{{waiguanItems.name ? waiguanItems.name : item.subnum.slice(0,2)}}/{{neishiItems.name ? neishiItems.name :item.subnum.slice(3,5)}}</text> -->
                                    <text>{{ waiguanItems.name ? waiguanItems.name : item.subnum }}/{{ neishiItems.name ?
                                        neishiItems.name : item.subnum1 }}</text>
                                    <!-- {{waiguanItems.name || neishiItems.name? waiguanItems.name +'/'+ neishiItems.name : item.subnum}} -->
                                </text>
                                <text v-if='index == 2' :style='{
                                    color: item.open ? "#2D56C5" : ""
                                }'>
                                    {{ cityItemsA.name ? cityItemsA.name : item.subnum }}
                                </text>

                                <text v-if='index == 3' :style='{
                                    color: item.open ? "#2D56C5" : ""
                                }'>
                                    {{ item.subnum }}
                                </text>
                                <!-- 	<image src="@/static/downArrorw-black.png" mode="" style='width: 30rpx;height:16rpx'>
								</image> -->
                                <!--   -->
                                <image :src="!item.open ? '/static/downArrorw-black.png' : '/static/shangjiantou.png'"
                                    style='width: 30rpx;height:16rpx; margin-left:10rpx'></image>
                            </view>
                        </view>
                        <!-- 展开 -->
                        <view class="box" style='z-index: 2;' :class="item.open == true ? 'animate' : ''">

                            <view class="box-cont" v-if="item.open == true && selectID == 0">

                                <view class="Alltitle" @click="quanbuVehiconclick(chexing, item)">
                                    <text class="Alltitle-one">{{ chexing.name }}</text>
                                    <text class="Alltitle-two">{{ chexing.num }}条</text>
                                </view>
                                <view class="center-box" v-for="(chexingvalue, chexingIndex) in chexing.value"
                                    :key="chexingIndex">
                                    <view class="center-title">
                                        <text class="center-text">{{ chexingvalue.name }}</text>
                                    </view>
                                    <view class="botton-flex" @click="AllVehiconclick(chexingson, item)"
                                        v-for="(chexingson, chexingsonIndex) in chexingvalue.value" :key="chexingsonIndex">
                                        <view class="bottom-box">
                                            <text class="botton-flex-title1">{{ chexingson.name }}</text>
                                            <text class="botton-flex-title2">{{ chexingson.num }}条</text>
                                        </view>
                                    </view>
                                </view>

                            </view>
                            <view class="box-cont" v-if="item.open == true && selectID == 1">
                                <!-- 外观 -->
                                <view style='padding: 0rpx 30rpx'>
                                    <view class='waiguan-title'>外观</view>
                                    <uni-row class="demo-uni-row" :width="nvueWidth">
                                        <uni-col :span="6" v-for='(waiguan, waiguanIndex) in AppearanceStyle.interior '>
                                            <view class="demo-uni-col dark">
                                                <!-- waiguanIndex == waiguanIndexs  ? "active-btn-color" : "activeRese-btn-color" -->
                                                <view ref="element" @click='activeWaiguan(waiguan, waiguanIndex, $event)'
                                                    class='waiguan-btn' id="btnwaiguan"
                                                    :class='{ "active-btn-color": waiguan.isFlag }'>
                                                    <view class='waiguan-title-style'>
                                                        <text style='padding-left:13rpx'>{{ waiguan.name }}</text><br />
                                                        <text class='waiguan-line'></text><text
                                                            style="margin-top:5rpx; margin-left: 12rpx; display: block;">{{
                                                                waiguan.num }}</text><text class='waiguan-line'></text>
                                                    </view>
                                                    <view>

                                                    </view>

                                                </view>

                                            </view>
                                        </uni-col>
                                    </uni-row>
                                </view>
                                <!-- 内饰 -->
                                <view style='padding: 20rpx 30rpx'>
                                    <view class='waiguan-title'>内饰</view>
                                    <uni-row class="demo-uni-row" :width="nvueWidth">
                                        <uni-col :span="6" v-for='(neishi, waiguanIndex) in AppearanceStyle.appearance '>
                                            <view class="demo-uni-col dark">
                                                <view class='waiguan-btn' @click='activeNeishi(neishi, waiguanIndex)'
                                                    :class='{ "active-btn-color": neishi.isFlag }'>
                                                    <view class='waiguan-title-style'>
                                                        <text style='padding-left:13rpx'>{{ neishi.name }}</text><br />
                                                        <text class='waiguan-line'></text><text
                                                            style="margin-top:5rpx;  margin-left: 12rpx;display: block;">{{
                                                                neishi.num }}</text><text class='waiguan-line'></text>
                                                    </view>
                                                    <view>
                                                    </view>
                                                </view>
                                            </view>
                                        </uni-col>
                                    </uni-row>
                                </view>

                                <view class='box-cont-btn-flex'>
                                    <view class='reset-btn' @click.stop='reset'>重置</view>
                                    <view class='examine-btn' @click.stop='examine(item)'>查看车源</view>
                                </view>
                            </view>
                            <view class="box-cont" v-if="item.open == true && selectID == 2">
                                <view class='flex-box1'>
                                    <view class='left-box'>
                                        <view class='left-box-name' @click.stop='cityFathreName(city, Cindex, item)'
                                            v-for='(city, Cindex) in cityArr' :key='city.id' :style='{
                                                color: CityFatherIndex == Cindex ? "#2D56C5" : ""
                                            }'>{{ city.name }}</view>
                                    </view>
                                    <view class='right-box'>
                                        <view :style='{
                                            color: CitySonIndex == Cindex ? "#2D56C5" : ""
                                        }' class='right-box-name' @click.stop='citySonName(citySon, Cindex, item)'
                                            v-for='(citySon, Cindex) in conType' :key='citySon.id'>
                                            <text>{{ citySon.name }} </text>
                                            <text style="padding-right: 10rpx;">{{ citySon.num }}条</text>
                                        </view>
                                    </view>
                                </view>

                            </view>
                            <view class="box-cont" v-if="item.open == true && selectID == 3">
                                <view class="shaixuan-box">
                                    <!-- -----{{ minNum }}-----{{ maxNum }}----- -->
                                    <view class="pross-box">
                                        <view class="shaixuan-title">价格区间(万元)</view>
                                        <!-- 价格区间进度条 -->
                                        <!-- 数字弹性和 -->
                                        <view class="shaixuan-pross">
                                            <view class="shaixuan-flex" v-for="(pross, prossindex) in prossArr"
                                                :key="prossindex">
                                                <view class="shaixuan-number">{{ pross }}</view>
                                            </view>
                                        </view>
                                        <!-- 下面拉取条 -->
                                        <view class="shaixuan-line">
                                            <view class="shangxuan-dian" v-for="(dian, dianindex) in 9" :key="dianindex">
                                            </view>

                                        </view>
                                        <view class="shangxuan-blue-line" :style="{
                                            width: Drag.width + 'px',
                                            left: Drag.left + 'px',
                                            'max-width': Drag.maxWidth - Drag.left + 'px',
                                            'min-width': Drag.minWidth + 'px',
                                        }">
                                            <!-- 左侧拉动 -->
                                            <view class="shangxuan-left" @touchstart="handleDragStartLeft"
                                                @touchmove="handleDragLeft" @touchend="handleDragEndLeft"></view>
                                            <!-- 右侧拉到 -->
                                            <view class="shangxuan-right" @touchstart="handleDragStartRight"
                                                @touchmove="handleDragRight" @touchend="handleDragEndRight"></view>
                                        </view>
                                    </view>
                                    <view class="cheyuanType">
                                        <!-- 车源类型 -->
                                        <view>
                                            <view class="cheyuanType-title">车源类型</view>
                                            <!-- 类型 -->
                                            <view class="cheyuanType-btn">
                                                <view @click="typeOnclick1(typeValue, typeValueIndex)"
                                                    class="cheyuanType-col"
                                                    v-for="(typeValue, typeValueIndex) in Contypobj.Arropen"
                                                    :key="typeValueIndex">
                                                    <view class="cheyuanType-views"
                                                        :class='{ "active-btn-blue": typeValue.isFlag }'>{{ typeValue.title
                                                        }}</view>
                                                </view>
                                            </view>
                                        </view>
                                        <!-- 商家类型 -->
                                        <view>
                                            <view class="cheyuanType-title">商家类型</view>
                                            <!-- 类型 -->
                                            <view class="cheyuanType-btn">
                                                <view @click="typeOnclick2(typeValue, typeValueIndex)"
                                                    class="cheyuanType-col"
                                                    v-for="(typeValue, typeValueIndex) in Contypobj.Arropen1"
                                                    :key="typeValueIndex">
                                                    <view class="cheyuanType-views"
                                                        :class='{ "active-btn-blue": typeValue.isFlag }'>{{ typeValue.title
                                                        }}</view>

                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class='btn-flex-but'>
                                        <view class='reset-btn' @click.stop='resetShaixuan'>重置</view>
                                        <view class='examine-btn' @click.stop='examineShaixuan(item)'>确定</view>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </view>

            <view class="shodoaw" @click="yinyingbufen" v-if="itemList.some(items => items.open == true)"></view>
            <!-- 列表 -->

      
                <scroll-view scroll-y="true"  refresher-enabled 
				@refresherrefresh="onRefresh"
				:refresher-triggered="triggered"
				>
		
                <view class='newEnergyList' v-if="VehicleModelList.length > 0">
                    <view @longtap="touchstartLista" @touchend="touchendLista" class='newEnergyListBox' v-for="(item, index) in VehicleModelList" :key='item.id'
                        @click="detailCar(item)">
                        <view class='newEnergyList-title'>
                            <view class='newEnergyList-title4'>
                                {{ item.cars_name }}
                            </view>
                            <view class='newEnergyList-img1'>
                                <!-- <image :src="item.url" alt="" /> -->
                            </view>
                        </view>
                        <view class='newEnergyList-title1'>
                            <text>
                                {{ item.cars_type }}
                            </text>
                            <text style="padding-left: 10rpx;">
                                {{ item.appearance_interior }}
                            </text>
                        </view>

                        <view class='newEnergyList-title2'>
                            <text v-if="item.standard_name">{{ item.standard_name }}</text>
                            <text v-if="item.standard_name" style="margin:0rpx 10rpx">|</text>
                            <text v-if="item.procedures_name">{{ item.procedures_name }}</text>
                            <text v-if="item.procedures_name" style="margin:0rpx 10rpx">|</text>
                            <text v-if="item.vin_code">车架号{{ item.vin_code == '' ? '' : item.vin_code }}</text>
                            <text v-if="item.vin_code" style="margin:0rpx 10rpx">|</text>
                            <text>车在{{ item.location_name }}</text>
                        </view>
                        <view class="newEnergyList-title5">
                            {{ item.configuration }}
                        </view>
                        <view class='newEnergyList-title3'>
                            <text class='newEnergyList-text1'>售价:{{ item.price }} <text v-if="item.price > 0">万</text> </text>
                        </view>
                        <view class="newEnergyList-title6">
                           <view class="adasda">
							   <view class='newEnergyList-text6'>{{ item.users_name }} <text v-if="item.location_name">（{{item.location_name}}）</text> </view>
							   <view class="newEnergyList-text8">
							       <image :src="item.icon_url"></image>
							   </view>
						   </view>
                            <view class='newEnergyList-text7'>{{ item.create_time }}</view>
                        </view>
                    </view>
                </view>

             
            </scroll-view>
              
      
          
            <view v-if="VehicleModelList.length == 0" class="lallList" >
                    <image src="@/static/暂无数据.png" />
                </view>

            <view class="bottom-title">
                <view class="bottom1-loader1" v-if="hasMore">
                    加载中...
                </view>
                <view class="bottom1-loader2" v-else>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import cuCustom from "@/components/custom-nav/cu-custom.vue";
import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";
import { getParallelImportVehicleModelList, getParallelImportVehicleCondition, getParallelImportVehicleModelColour, getParallelImportVehicleCity } from "@/api/newEnergy.js";
export default {
    components: {
        cuCustom,
        addressSearchFixed,
    },
    data() {
        return {
            show: true,
            modeClass: 'fade',
            prossArr: [
                0, 10, 20, 30, 40, 50, 60, 70,80, '不限'
            ],
            styles: {},
            objSelect: {}, // 传来的参数整体
            selectID: undefined,
            CustomBar: this.CustomBar,
            SeachBar: this.SeachBar,
            triggered:false,
            VehicleModelList: [],
            AppearanceStyle: {},
            AllVehicUname: '',
            waiguanItems: {},
            neishiItems: {},
            CityObj: {},
            cityItemsA: {},
            waiguanIndexs: -1,
            modelObj: {},
            neishiIndexs: -1,
            CityFatherIndex: undefined,
            CitySonIndex: undefined,
            chexing: {},

            conType: [],
            shangjia: {},
            isflaga:false,
            cheyuan: {},
            cityArr: [],
            Contypobj: {
                Arropen: [
                    {
                        title: '全部',
                        isFlag: true,
                    },
                    {
                        title: '现车',
                        isFlag: false,
                    },
                    {
                        title: '期货',
                        isFlag: false,
                    }
                ],
                Arropen1: [
                    {
                        title: '全部',
                        isFlag: true,
                    },
                    {
                        title: '公司',
                        isFlag: false,
                    },
                    {
                        title: '个人',
                        isFlag: false,
                    }
                ],


            },

            itemList: [{
                subnum: '平行进口',
                open: false,
                disabled: true
            },
            {
                subnum: '外观',
                subnum1: '内饰',
                open: false
            },
            {
                subnum: '地区',
                open: false
            },
            {
                subnum: '筛选',
                open: false
            }
            ],
            dropdownTop: this.CustomBar + this.SeachBar,
            page: 1,
            page_num: 15,
            total: 0,
            hasMore: false,
            minNum: '',
            maxNum: '',
            Drag: {
                startLeft: 0,
                startRight: 0,
                left: 20,
                defaultWidth: 200,
                width: 200,
                maxWidth: 200,
                minWidth: 30
            },
            isDragging: false, // 是否正在拖动
            appearance_interiorobj:{},
            isF:false
        }
    },
    onLoad(options) {
        this.objSelect = JSON.parse(options.items)
        this.getList(JSON.parse(options.items))
        this.getChexing(JSON.parse(options.items))
        this.stylePro(JSON.parse(options.items))
        this.getCity(JSON.parse(options.items))
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        setTimeout(() => {
            // this.AppearanceStyle.interior.forEach(item => {
            // 	 item.isFlag = false
            // })
            // this.AppearanceStyle.appearance.forEach(item => {
            // 	 item.isFlag = false
            // })
        }, 1000)
    },
    onReachBottom() {
        
        console.log(123);
        this.hasMore = true
        let obj = {
            series_two_id: this.objSelect.series_two_id,
            page: this.page,
            page_num: this.page_num
        }
        getParallelImportVehicleModelList(obj).then(res => {
            setTimeout(() => {
                const newData = res.data.data
                // 说明数据已经加载完了
                if (this.VehicleModelList.length >= res.data.total) {
                    uni.showToast({
                        title: '暂无更多数据',
                        icon: 'none'
                    })
                    this.hasMore = false
                } else {
                    this.hasMore = true
                    this.page++
                    this.VehicleModelList = this.VehicleModelList.concat(newData);
                }
            }, 1000)

        })

    },
    onPullDownRefresh() {

        this.VehicleModelList = []
        //调用获取数据方法
        this.getList(this.objSelect)
        setTimeout(() => {
            this.page = 1
            //结束下拉刷新
            uni.stopPullDownRefresh()
        }, 2000);
    },
    onUnload() {
        if (this.isDragging == false) {
            this.moveLeft()
        }
    },
    onReady() {

        // setTimeout(() => {
        //     uni.createSelectorQuery().selectAll('.shaixuan-line').boundingClientRect((data) => {
        //         console.log(data, '12222222222');
        //         this.arrIndex = data.map(item => {
        //             return item.top
        //         })
        //     }).exec()
        // }, 1000)
    },
    methods: {
		// 查看详情
		detailCar(item){
			uni.navigateTo({
				url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + item.id
			})
		},
		event_clickSearchBtn(){
			  this.getList(this.objSelect)
		},
        touchstartLista() {
            this.isflaga = true
            // this.getList(this.objSelect)
            this.getList(this.objSelect)
          
        },
        touchendLista() {
         
            this.isF = false
        
        },
        examine(itemopen) {
              console.log(this.waiguanItems.name, this.neishiItems.name, '外观内饰选中值');
              let obj = {
                appearance_interior:this.waiguanItems.name + '/'+ this.neishiItems.name
              }
            this.appearance_interiorobj = obj
            this.getList(this.objSelect)
            itemopen.open = false
        },
        onRefresh(){
            let that =this
           setTimeout(() => {
            this.page = 1
            // this.triggered = false
            this.isflaga = false
            this.isF = false
            if(!this.triggered) {
                this.triggered = true
                setTimeout(() => {
                    that.triggered = false
                })
            }
            this.getList(this.objSelect)
           }, 800)
        },
        // 点击阴影
        yinyingbufen() {
           for(let i = 0 ; i < this.itemList.length ; i++) {
               this.itemList[i].open = false
           }
        },
        // 左侧开始拖动
        handleDragStartLeft(event) {
            event.preventDefault();
            this.isDragging = true
            this.Drag.startLeft = event.changedTouches[0].pageX
        },
        // 向左侧拖动
        handleDragLeft(event) {
            event.preventDefault();
            if (this.isDragging) {
                const touchleft = event.changedTouches[0];
                if (touchleft.pageX - 18 < 0) {
                    return false
                }
                if (touchleft.pageX > this.Drag.startLeft) {
                    if (this.Drag.defaultWidth - Math.abs(this.Drag.startLeft - touchleft.pageX) <= this.Drag.minWidth) {
                        return
                    }
                    this.Drag.width = this.Drag.width > 0 ? this.Drag.defaultWidth - Math.abs(this.Drag.startLeft - touchleft.pageX) : 0
                } else {
                    this.Drag.width = this.Drag.width > 0 ? this.Drag.defaultWidth + Math.abs(this.Drag.startLeft - touchleft.pageX) : 0
                }
                this.Drag.left = touchleft.pageX - 18 > 0 ? touchleft.pageX - 18 : 0;
                this.minNum = (this.Drag.left / (this.Drag.maxWidth - 40) * 80).toFixed(2);
            }
        },
        // 左侧拖动结束
        handleDragEndLeft(event) {
            event.preventDefault();
            if (this.isDragging) {
                const touchleft = event.changedTouches[0];
                this.Drag.defaultWidth = this.Drag.width;
                this.Drag.left = touchleft.pageX - 18
            }
        },
        // 右侧开始拖动
        handleDragStartRight(event) {
            event.preventDefault();
            this.isDragging = true;
            this.Drag.startLeft = event.changedTouches[0].pageX;
        },

        // 向右侧拖动
        handleDragRight(event) {
            event.preventDefault();
            if (this.isDragging) {
                const touchleft = event.changedTouches[0];
                console.log(this.Drag.maxWidth, this.Drag.left + this.Drag.width);
                console.log(this.Drag.left + this.Drag.defaultWidth + Math.abs(this.Drag.startLeft - touchleft.pageX) > this.Drag.maxWidth);
                if (touchleft.pageX > this.Drag.startLeft) {
                    this.Drag.width = this.Drag.left + this.Drag.defaultWidth + Math.abs(this.Drag.startLeft - touchleft.pageX) > this.Drag.maxWidth ? this.Drag.maxWidth - this.Drag.left : this.Drag.defaultWidth + Math.abs(this.Drag.startLeft - touchleft.pageX)
                } else {
                    if (this.Drag.defaultWidth - Math.abs(this.Drag.startLeft - touchleft.pageX) <= this.Drag.minWidth) {
                        return
                    }
                    this.Drag.width = this.Drag.defaultWidth - Math.abs(this.Drag.startLeft - touchleft.pageX)
                }

                this.maxNum = (this.Drag.width + this.Drag.left) / (this.Drag.maxWidth - 40) * 80 < 80 ? ((this.Drag.width + this.Drag.left) / (this.Drag.maxWidth - 40) * 80).toFixed(2) : '不限'

            }
        },

        // 右侧拖动结束
        handleDragEndRight(event) {
            event.preventDefault();
            this.isDragging = false;
            const touchleft = event.changedTouches[0];
            this.Drag.defaultWidth = this.Drag.defaultWidth - (this.Drag.startLeft - touchleft.pageX)
        },


        // 左侧拖动
        moveLeft(event) {
            event.preventDefault();
            if (this.isDragging) {
                const touchleft = event.changedTouches[0]
                console.log(touchleft.pageX);

                const width = this.Drag.startLeft - touchleft.pageX + this.Drag.width

                this.Drag.width = width
                console.log(width, 'widthwidthwidthwidthwidth');
            }

        },
        // 右侧移动中
        moveRight(event) {
            console.log(event.changedTouches[0].pageX, '右侧拖动中');
            const touchright = event.changedTouches[0]
        },
        // 左侧结束拖动
        endLeft() {
            this.isDragging = false
        },
        // 右侧结束拖动
        endRight() {
            console.log('右侧结束');
        },
        // 筛选确定
        examineShaixuan(itemopen) {
            console.log(this.shangjia, this.cheyuan,this.maxNum,this.minNum, 'itemopen');
            this.getList(this.objSelect)
            itemopen.open = false
        },
        // 筛选重置
        resetShaixuan() {
            for (let i = 0; i < this.Contypobj.Arropen.length; i++) {
                if( this.Contypobj.Arropen[i].title != '全部') {
                    this.Contypobj.Arropen[i].isFlag = false;
                }else {
                    this.Contypobj.Arropen[i].isFlag = true
                }
              

               
            }
            for (let i = 0; i < this.Contypobj.Arropen1.length; i++) {
                if( this.Contypobj.Arropen1[i].title != '全部') {
                    this.Contypobj.Arropen1[i].isFlag = false;
                }else {
                    this.Contypobj.Arropen1[i].isFlag = true
                }

              
            }
         

            this.maxNum = ''
            this.minNum = ''
            this.cheyuan.source_status= ''
            this.shangjia.identity = ''
            
        },
        // 车原类型
        typeOnclick1(items, index) {
            for (let i = 0; i < this.Contypobj.Arropen.length; i++) {
                if (i != index) {
                    this.Contypobj.Arropen[i].isFlag = false;
                }
            }
            this.Contypobj.Arropen[index].isFlag = !this.Contypobj.Arropen[index].isFlag
          console.log(items, '车源类型');
            let obj = {
                source_status: items.title =='全部' ?  '' : index
            }
            console.log(obj, '车源类型obj对象');
            this.cheyuan = obj
        },
        // 商家类型
        typeOnclick2(itemValue, index) {
            for (let i = 0; i < this.Contypobj.Arropen1.length; i++) {
                if (i != index) {
                    this.Contypobj.Arropen1[i].isFlag = false;
                }
            }
            this.Contypobj.Arropen1[index].isFlag = !this.Contypobj.Arropen1[index].isFlag
            this.shangjia = index
              
            let obj = {
                identity: itemValue.title == '全部' ? '' : index
            }
            console.log(obj, '商家类型');
            this.shangjia = obj
        },
        // 城市-父级
        cityFathreName(items, index, itemsOpen) {
            console.log(items, '省级');
            this.CityFatherIndex = index
            if (index != 0) {
                this.conType = items.children.length > 0 ? items.children : []
            } else {
                this.conType = []
            }
            //  全部地区单独走一下
            if (items.name == '全部地区') {
                let obj = {
                    city_id: items.id
                }
                this.cityItemsA = items
                itemsOpen.open = false
                this.CityObj = obj

                this.getList(this.objSelect)
            }
        },
        // 城市子级
        citySonName(items, index, itemsOpen) {
            console.log(items);
            let obj = {
                city_id: items.id
            }
            console.log(obj, '市');
            this.CityObj = obj
            this.cityItemsA = items
            this.CitySonIndex = index
            itemsOpen.open = false
            this.getList(this.objSelect)
            // this.getEnergyVehicleModelList(this.objSelect)
        },
        // 城市获取
        getCity(items) {
            let obj = {
                series_two_id: items.id,
                search: items.name,
            }
            getParallelImportVehicleCity(obj).then(res => {
                console.log(res, '获取城市');
                this.cityArr = res.data
            })
        },
        // 外观选中
        activeWaiguan(items, index) {
            console.log(items, 'items');
            for (let i = 0; i < this.AppearanceStyle.interior.length; i++) {
                if (i != index) {
                    this.AppearanceStyle.interior[i].isFlag = false;
                }
            }
            this.AppearanceStyle.interior[index].isFlag = !this.AppearanceStyle.interior[index].isFlag
            if (items.isFlag == false) {
                this.waiguanItems = {}
            } else {
                this.waiguanItems = items
            }

            this.waiguanIndexs = index

        },
        // 内饰选中
        activeNeishi(items, index) {
            for (let i = 0; i < this.AppearanceStyle.appearance.length; i++) {
                if (i != index) {
                    this.AppearanceStyle.appearance[i].isFlag = false;
                }
            }
            this.AppearanceStyle.appearance[index].isFlag = !this.AppearanceStyle.appearance[index].isFlag
            if (items.isFlag == false) {
                this.neishiItems = {}
            } else {
                this.neishiItems = items
            }


            this.neishiIndexs = index

        },
        // 外观和内饰
        stylePro(items) {
            let obj = {
                series_two_id: items.id,
                search: items.name
            }
            getParallelImportVehicleModelColour(obj).then(res => {
                console.log(res, '外观和内饰');
                this.AppearanceStyle = res.data
            })
        },
        // 外观-内饰重置
        reset() {
            // 外观
            this.waiguanIndexs = -1

            this.waiguanItems = {}
            // 内饰
            this.neishiIndexs = -1
            this.neishiItems = {}

            this.AppearanceStyle.interior.forEach(item => {
                item.isFlag = false
            })
            this.AppearanceStyle.appearance.forEach(item => {
                item.isFlag = false
            })
        },
        // 车型选中
        AllVehiconclick(items, itemPpen) {
            console.log(items, 'itemsitemsitemsitems');
            let obj = {}
			if(items.type == 1){
				obj.source_type_id = items.id
			} else if(items.type == 2){
				obj.model_two_id = items.id
			}
            console.log(obj, '车型子级');
            this.modelObj = obj
            this.AllVehicUname = items.name.length > 10 ? items.name.slice(11, 19) + '...' : items.name
            itemPpen.open = false
            this.getList(this.objSelect)

            // this.getEnergyVehicleModelList(this.objSelect)
        },
        //  平行车全部车型选中
        quanbuVehiconclick(items, itemPpen) {
            // let obj = {
            //     searchs: '',
            // }
            this.modelObj = obj
            this.AllVehicUname = items.name.length > 10 ? items.name.slice(11, 19) + '...' : items.name
            itemPpen.open = false
            this.getList(this.objSelect)
        },
        // 车型接口
        getChexing(items) {
            console.log(items.name, '123123');
            let obj = {
                series_two_id: items.id,
                search: items.name,
            }
            getParallelImportVehicleCondition(obj).then(res => {
                console.log(res, '车型搜索');
                this.chexing = res.data
            })
        },
        // 列表接口
        getList(items) {
            console.log(items, 'items');
            console.log(this.modelObj, 'this.modelobj');
			console.log(this.appearance_interiorobj)
            if ( this.page == 1 && this.isflaga) {
					this.triggered = true
				}
			console.log(this.cheyuan.source_status)
            let obj = {
                series_two_id: items.id,
                search: items.name|| '', // 车型
                city_id: this.CityObj.city_id || '', //城市
                page: this.page, // 页数
                page_num: this.page_num, // 条数
                start_price:String(this.minNum) || '', //价格区间-开始数
                end_price:String(this.maxNum) || '', // 价格区间-结束数
                source_status: String(this.cheyuan.source_status) == 'undefined' ? "" :  String(this.cheyuan.source_status) || '', // 现车 期货
                identity: String(this.shangjia.identity) == 'undefined' ? "" : String(this.shangjia.identity) || '', // 个人 公司
				source_type_id: this.modelObj.source_type_id || '',
				model_two_id: this.modelObj.model_two_id || '',
				appearance_name: this.waiguanItems.name || '',
				interior_name: this.neishiItems.name || ''
            }
            getParallelImportVehicleModelList(obj).then(res => {
                console.log(res);
                if ( this.page == 1 && this.isF) {
					this.triggered = false
                   
				}
                this.VehicleModelList = res.data.data
                this.total = res.data.total
            })
            // getParallelImportVehicleModelList(obj).then(res => {
            //     console.log(res);
            // })
        },
        changeContent(items, index) {

            this.selectID = index
            this.itemList.forEach(i => {
                // 如果不是点击时候的open 说明全部隐藏起来
                if (i.open != this.itemList[index].open) {
                    i.open = false
                }
            })

            items.open = !items.open
            setTimeout(() => {
                uni.createSelectorQuery().selectAll(".shaixuan-line").boundingClientRect(res => {
                    console.log(res, '888888888888888888888888888');
                    if (res.length > 0) {
                        this.Drag.maxWidth = res[0].width
                    }
                }).exec()
            }, 100)
        }
    }
};
</script>
<style lang='scss' scoped>
.parallel_container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .newEnergy-backgourd {
		position: fixed;
		left: 0;
		right: 0;
        .bottom-title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-bottom: 40rpx;
        }
		scroll-view {
			height: calc(100% - 90rpx);
		}
        .newEnergy-flex {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            z-index: 2;
            width: 100%;
            .collapse {
                line-height: 87rpx;

                .sub-title {}


                .animate {
                    animation: slideDown 0.3s cubic-bezier(0.46, 0.35, 0.23, 0.27) forwards;
                    /* 使用动画效果 */

                }

                @keyframes slideDown {
                    0% {
                        opacity: 0;
                        height: 0;
                        /* 初始高度为0 */
                    }

                    100% {
                        opacity: 1;
                        height: auto;
                        /* 最终高度 */
                    }
                }

                .box {
                    position: absolute;

                    left: 0;
                    width: 100%;
                    background-color: #fff;

                    // animation: slideDown 3s ease-in-out forwards; /* 使用动画效果 */
                    .box-cont {
                   z-index: 2;
                        .shaixuan-box {
                            padding: 0 30rpx;

                            .shaixuan-pross {
                                display: flex;
                                justify-content: space-between;

                                .shaixuan-number {
                                    font-size: 20rpx;
                                    color: #d6d2d2;
                                }
                            }

                            .shaixuan-line {
                                background: #F7F8FA;
                                height: 10rpx;
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                position: relative;

                                .pross-box {
                                    position: relative;
                                }


                                .shangxuan-dian {
                                    border-radius: 50%;
                                    height: 10rpx;
                                    width: 10rpx;
                                    background-color: #999999;
                                }



                                // .shangxuan-blue-line::after{
                                //     content: '';
                                //     height: 30rpx;
                                //     background-color: #0E59EA;
                                //     width: 10rpx;
                                //     border-radius: 15rpx;
                                //     position: absolute;
                                //     right: 0;
                                //     top: -10rpx;
                                // }
                                // .shangxuan-blue-line::before{
                                //     content: '';
                                //     height: 30rpx;
                                //     background-color: #0E59EA;
                                //     width: 10rpx;
                                //     border-radius: 15rpx;
                                //     position: absolute;
                                //     left: 0;
                                //     top: -10rpx;
                                // }
                            }

                            .shangxuan-blue-line {
                                background-color: #0E59EA;
                                height: 10rpx;
                                // width: 300rpx;
                                position: absolute;
                                top: -10rpx;
                                left: 0;
                                position: relative;

                                .shangxuan-left {
                                    background-color: #0E59EA;
                                    width: 10rpx;
                                    height: 30rpx;
                                    border-radius: 15rpx;
                                    position: absolute;
                                    left: 0;
                                    top: -10rpx;
                                }

                                .shangxuan-right {
                                    background-color: #0E59EA;
                                    width: 10rpx;
                                    height: 30rpx;
                                    border-radius: 15rpx;
                                    position: absolute;
                                    right: 0;
                                    top: -10rpx;
                                }
                            }

                            .shaixuan-line {}

                            .btn-flex-but {
                                display: flex;
                                justify-content: space-between;
                                padding: 20rpx 0rpx;

                                .reset-btn {
                                    width: 274rpx;
                                    height: 80rpx;
                                    background: #F2F2F2;
                                    border-radius: 14rpx;
                                    text-align: center;
                                    line-height: 80rpx;
                                    font-size: 28rpx;
                                    font-family: PingFang SC;
                                    font-weight: 500;
                                    color: #000000;

                                }

                                .examine-btn {
                                    width: 400rpx;
                                    height: 80rpx;
                                    line-height: 80rpx;
                                    background: #0E59EA;
                                    border-radius: 14rpx;
                                    text-align: center;
                                    color: #fff;
                                    font-size: 28rpx;
                                    font-family: PingFang SC;
                                    font-weight: 500;
                                }
                            }

                            .cheyuanType {

                                //  .cheyuanType-title{
                                //     margin-bottom: 20rpx;
                                //  }
                                .cheyuanType-btn {
                                    display: flex;
                                    margin-bottom: 20rpx;

                                    .cheyuanType-col {
                                        margin-left: 20rpx;

                                        .cheyuanType-views {
                                            width: 180rpx;
                                            height: 60rpx;
                                            background: #F7F8FA;
                                            border-radius: 30rpx;
                                            text-align: center;

                                            line-height: 60rpx;
                                        }

                                        .active-btn-blue {
                                            width: 180rpx;
                                            height: 60rpx;
                                            background: #0E59EA;
                                            border-radius: 30rpx;
                                            text-align: center;
                                            line-height: 60rpx;
                                            color: #fff !important;

                                        }


                                    }


                                }
                            }
                        }

                        .flex-box1 {
                            display: flex;
                            padding: 0rpx 30rpx;
                            z-index: 999;

                            .left-box {
                                width: 200rpx;
                                height: 964rpx;
                                z-index: 2;
                                background: #FFFFFF;

                                .left-box-name {
                                    border-bottom: 2rpx solid #F2F2F2;
                                }
                            }

                            .right-box {
                                z-index: 2;
                                width: 546rpx;
                                height: 964rpx;
                                background: #FFFFFF;
                                box-shadow: -4rpx 0 6rpx -2rpx #999999;

                                .right-box-name {
                                    padding-left: 20rpx;
                                    border-bottom: 2rpx solid #F2F2F2;
                                    display: flex;
                                    justify-content: space-between;
                                }
                            }
                        }


                        .Alltitle {
                            display: flex;
                            justify-content: space-between;
                            padding: 0rpx 30rpx;

                            .Alltitle-one {


                                font-size: 28rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #000000;
                            }

                            .Alltitle-two {

                                font-size: 24rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                            }

                        }

                        .center-box {
                            padding: 0rx 30rpx;

                            .center-title {
                                padding: 0rpx 30rpx;
                                background-color: #F4F4F4;
                                width: 100%;
                                height: 66rpx;

                                line-height: 66rpx;
                            }

                            .botton-flex {
                                padding: 0rpx 30rpx;

                                .bottom-box {
                                    width: 100%;
                                    display: flex;
                                    justify-content: space-between;
                                    height: 100rpx;
                                    border-bottom: 2rpx solid #F2F2F2;
                                    line-height: 100rpx;

                                    .botton-flex-title1 {
                                        font-size: 28rpx;
                                        font-family: PingFang SC;
                                        font-weight: 500;
                                        color: #000000;
                                    }

                                    .botton-flex-title2 {
                                        font-size: 24rpx;
                                        font-family: PingFang SC;
                                        font-weight: 500;
                                        color: #999999;
                                    }
                                }
                            }
                        }

                        .box-cont-btn-flex {
                            display: flex;
                            justify-content: space-between;
                            padding: 20rpx 30rpx;

                            .reset-btn {
                                width: 274rpx;
                                height: 80rpx;
                                background: #F2F2F2;
                                border-radius: 14rpx;
                                text-align: center;
                                line-height: 80rpx;
                                font-size: 28rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #000000;

                            }

                            .examine-btn {
                                width: 400rpx;
                                height: 80rpx;
                                line-height: 80rpx;
                                background: #0E59EA;
                                border-radius: 14rpx;
                                text-align: center;
                                color: #fff;
                                font-size: 28rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                            }
                        }

                        .waiguan-flex {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                        }

                        .waiguan-title {

                            font-size: 30rpx;
                            font-family: PingFang SC;
                            font-weight: 800;
                            color: #000000;
                        }

                        .active-btn-color {
                            background: #0E59EA !important;

                            text {
                                color: #fff !important;
                            }

                            .waiguan-title-style::before {
                                content: '';

                                position: absolute;
                                height: 2rpx;
                                right: 0rpx;
                                bottom: 25rpx;
                                background: #fff !important;
                            }

                            .waiguan-title-style::after {
                                content: '';

                                position: absolute;
                                height: 2rpx;
                                left: 0rpx;
                                bottom: 25rpx;
                                background: #fff !important;
                            }
                        }

                        .activeRese-btn-color {
                            background: #F7F8FA !important;
                        }

                        .waiguan-btn {
                            margin-right: 10rpx;
                            height: 80rpx;
                            background: #F7F8FA;
                            border-radius: 40rpx;
                            text-align: center;

                            .waiguan-title-style {

                                padding: 15rpx 0rpx;

                                font-size: 24rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #000000;
                                line-height: 26rpx;
                                position: relative;

                            }

                            .waiguan-title-style::before {
                                content: '';
                                width: 15rpx;
                                position: absolute;
                                height: 2rpx;
                                right: 50rpx;
                                bottom: 25rpx;
                                background: black;
                            }

                            .waiguan-title-style::after {
                                content: '';
                                width: 15rpx;
                                position: absolute;
                                height: 2rpx;
                                left: 60rpx;
                                bottom: 25rpx;
                                background: black;
                            }
                        }

                    }



                }

                // @keyframes slideDown {
                //     0% {
                //         height: 0; /* 初始高度为0 */
                //     }
                //     100% {
                //         height: auto; /* 最终高度 */
                //     }
                //     }
            }


        }

        .shodoaw {
            background-color: black;
            opacity: 0.2;
            position: fixed;
            top: 350rpx;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        .lallList {
            position: fixed;
            width: 497rpx;
            height: 379rpx;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            image {
                width: 100%;
                height: 100%;
            }
        }

        .newEnergyList {
            padding: 20rpx 30rpx;
            // overflow: auto;
            margin-top: 7rpx;
            box-sizing: border-box;
            // height: 1200rpx;
            overflow: auto;

            // height: 100vh;
            .newEnergyListBox {

                margin-bottom: 20rpx;
                background: #FFFFFF;
                border-radius: 14rpx;
                padding: 30rpx 19rpx;
                z-index: 1;

                .newEnergyList-title {
                    .newEnergyList-title4 {
                        font-weight: 800;
                        color: #000000;
                        font-size: 28rpx;
                        font-family: PingFang SC;
                    }

                    .newEnergyList-img1 {
                        padding-left: 20rpx;
                        width: 28rpx;
                        height: 24rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                }

                .newEnergyList-title1 {

                    margin-bottom: 20rpx;
                    height: 23rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    display: flex;
                    color: #333333;

                }

                .newEnergyList-title2 {
                    margin-bottom: 20rpx;
                    height: 20rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                }

                .newEnergyList-title5 {
                    margin-bottom: 20rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
					overflow: hidden;
					text-overflow: ellipsis; /*省略号*/
					display: -webkit-box;
					-webkit-box-orient: vertical; /*行向垂直排列*/
					-webkit-line-clamp: 2; /*限制2行*/
                }

                .newEnergyList-title6 {
                    display: flex;
					justify-content: space-between;
					.adasda{
						display: flex;
						align-items: center;
					}
                    .newEnergyList-text6 {
                        clear: both;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
						white-space: nowrap;
                    }

                    .newEnergyList-text7 {
                        box-sizing: border-box;
                        height: 16rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;
						white-space: nowrap;
                    }

                    .newEnergyList-text8 {

                        width: 100rpx;
                        height: 43rpx;
                        margin-left: 20rpx;
                        margin-top: -10rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .newEnergyList-title3 {
                    margin-bottom: 20rpx;

                    .newEnergyList-text1 {
                        height: 31rpx;
                        font-size: 32rpx;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #EC4B4B;

                    }

                    .newEnergyList-text2 {

                        height: 20rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #333333;
                    }

                    .newEnergyList-text3 {

                        height: 16rpx;
                        font-size: 20rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;
                        float: right;
                        padding-top: 10rpx;
                    }
                }

            }
        }
    }
}

</style>